<template>
  <view class="wrapper">
    <view class="page" :class="[{ 'slide-out': animateOut, 'slide-in': animateIn }]">
      <view class="top-nav">
        <view class="nav-left">
          <image class="nav-icon" src="/static/images/home/diamond.png" mode="widthFix" />
          <text class="nav-title">
            武汉云友蔬菜批发配送
          </text>
        </view>
        <image class="nav-refresh" src="/static/images/home/refresh.png" mode="widthFix" @tap="onRefresh" />
      </view>
      <scroll-view class="main-scroll">
        <view class="credit-card">
          <image class="credit-bg-left" src="/static/images/home/bg_top.png" mode="widthFix" />
          <image class="credit-bg-right" src="/static/images/home/bg_bottom.png" mode="widthFix" />

          <view class="credit-top">
            <view class="credit-total">
              <text class="credit-title">
                赊欠总额
              </text>
              <text class="credit-amount">
                {{ arrearsTotal }}
              </text>
            </view>
            <view class="credit-share-btn">
              赊欠分享
            </view>
          </view>
          <view class="credit-bottom">
            <view class="credit-item">
              <text class="credit-item-value">
                {{ formatMoney(monthSales) }}
              </text>
              <text class="credit-item-label">
                月销售额/元
              </text>
            </view>
            <view class="credit-item">
              <text class="credit-item-value">
                {{ formatMoney(monthProfit) }}
              </text>
              <text class="credit-item-label">
                月收益/元
              </text>
            </view>
          </view>
        </view>
        <view class="feature-grid">
          <view v-for="(item, index) in featureList" :key="index" class="feature-item" @tap="onFeatureTap(item)">
            <image class="feature-icon" :src="item.icon" />
            <text class="feature-text">
              {{ item.title }}
            </text>
          </view>
        </view>

        <view class="today-summary">
          <view class="today-header">
            <image class="today-icon" src="/static/images/home/icon_today_summary.png" mode="widthFix" />
            <text class="today-title">
              今日营业概览
            </text>
          </view>

          <view class="summary-grid">
            <view class="summary-item" @tap="onItemTap('总营收')">
              <view class="summary-label-row">
                <view class="summary-label-left">
                  <text class="summary-label">
                    总营收（{{ totalOrders }}单）
                  </text>
                  <text class="summary-value summary-value-blue">
                    {{ totalRevenue }}
                  </text>
                </view>
                <image class="summary-arrow" src="/static/images/home/arrow_right.png" mode="widthFix" />
              </view>
            </view>
            <view class="summary-item" @tap="onItemTap('总支出')">
              <view class="summary-label-row">
                <view class="summary-label-left">
                  <text class="summary-label">
                    总支出
                  </text>

                  <text class="summary-value summary-value-red">
                    {{ totalExpense }}
                  </text>
                </view>
                <image class="summary-arrow" src="/static/images/home/arrow_right.png" mode="widthFix" />
              </view>
            </view>
            <view class="summary-item" @tap="onItemTap('买家赊欠')">
              <view class="summary-label-row">
                <view class="summary-label-left">
                  <text class="summary-label">
                    买家赊欠（{{ buyerCount }}人）
                  </text>
                  <text class="summary-value summary-value-orange">
                    {{ buyerArrears }}
                  </text>
                </view>
                <image class="summary-arrow" src="/static/images/home/arrow_right.png" mode="widthFix" />
              </view>
            </view>
            <view class="summary-item" @tap="onItemTap('历史还款')">
              <view class="summary-label-row">
                <view class="summary-label-left">
                  <text class="summary-label">
                    历史还款（{{ historyCount }}人）
                  </text>
                  <text class="summary-value summary-value-blue">
                    {{ historyRepayment }}
                  </text>
                </view>
                <image class="summary-arrow" src="/static/images/home/arrow_right.png" mode="widthFix" />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

      <custom-tabbar @navigate="handleNavigate" />
    </view>
  </view>
</template>

<script setup lang="ts">
import customTabbar from '@/components/custom-tabbar/custom-tabbar.vue';
import { formatMoney } from '@/utils';

import { ref } from 'vue';

const animateOut = ref(false);
const animateIn = ref(false);
const arrearsTotal = 20842;
const monthSales = 55842.00;
const monthProfit = 844.00;
const featureList = [
  { title: '赊欠录入', icon: '/static/images/home/icon_arrears.png' },
  { title: '收入支出', icon: '/static/images/home/icon_income_expense.png' },
  { title: '快捷还款', icon: '/static/images/home/icon_quick_repay.png' },
  { title: '货主批次', icon: '/static/images/home/icon_owner_batch.png' },
  { title: '订单管理', icon: '/static/images/home/icon_order_manage.png' },
  { title: '买家管理', icon: '/static/images/home/icon_buyer_manage.png' },
  { title: '货品管理', icon: '/static/images/home/icon_goods_manage.png' },
  { title: '库存管理', icon: '/static/images/home/icon_stock_manage.png' },
  { title: '标签打印', icon: '/static/images/home/icon_label_print.png' },
  { title: '报表中心', icon: '/static/images/home/icon_report_center.png', url: '/pages/report/index' },
  { title: '报表中心', icon: '/static/images/home/icon_bulk_order.png', url: '/pages/report/index' },
  { title: '批量下单', icon: '/static/images/home/icon_bulk_order1.png' },
];

const totalOrders = 140;
const totalRevenue = 229859;
const totalExpense = 999;
const buyerCount = 12;
const buyerArrears = 129859;
const historyCount = 1;
const historyRepayment = 229859;

function onRefresh() {
  console.log('刷新数据');
}

function onFeatureTap(item: { title: string; icon: string; url: string }) {
  console.log(item);
  uni.navigateTo({
    url: item.url,
  });
}

function handleNavigate({ type, url }: { type: string; url: string }) {
  if (type === 'navigateTo') {
    animateOut.value = true;
    setTimeout(() => {
      animateOut.value = false;
      uni.navigateTo({ url });
    }, 300);
  }
  else if (type === 'switchTab') {
    uni.switchTab({ url });
  }
}

onShow(() => {
  animateIn.value = true;
  setTimeout(() => {
    animateIn.value = false;
  }, 300);
});
</script>

<style scoped>
.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding-top: 28rpx;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

.page.slide-out {
  transform: translateX(-100%);
}

.page.slide-in {
  transform: translateX(0);
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 20rpx;
  z-index: 1000;
  border-bottom: 1rpx solid #eee;

}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-icon {
  width: 42rpx;
  height: 42rpx;
  margin-right: 16rpx;
}

.nav-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 700;
}

.nav-refresh {
  width: 30rpx;
  height: 30rpx;
}

.credit-card {
  position: relative;
  background: #43CF7C;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
  color: #fff;
  overflow: hidden;
}

.credit-bg-left {
  position: absolute;
  right: -60rpx;
  top: -148rpx;
  width: 298rpx;
  opacity: 0.1;
  transform: rotate(-45deg);
  z-index: 0;
  background-color: #fff;
}

.credit-bg-right {
  position: absolute;
  right: 100rpx;
  bottom: -130rpx;
  width: 260rpx;
  opacity: 0.1;
  transform: rotate(45deg);
  z-index: 0;
  background-color: rgba(255, 255, 255, 1)
}

.credit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.credit-total {
  display: flex;
  flex-direction: column;
}

.credit-title {
  font-size: 24rpx;
}

.credit-amount {
  font-size: 44rpx;
}

.credit-share-btn {
  background: #fff;
  color: #53D387;
  padding: 10rpx 20rpx;
  box-shadow: 0px 4px 7px -1px;
  border-radius: 12rpx;
  font-size: 24rpx;
}

.credit-bottom {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 150rpx 20rpx 20rpx;
  z-index: 1;
}

.credit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.credit-item-label {
  font-size: 24rpx;
}

.credit-item-value {
  font-size: 36rpx;
  margin-top: 10rpx;
}

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx 0;
}

.feature-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;

}

.wrapper {
  padding-bottom: 100rpx;
  /* 与 tabbar 高度相匹配 */
}

.feature-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 12rpx;
  background: rgba(217, 217, 217, 0.32);
  padding: 5rpx;
  border-radius: 50%;
}

.feature-text {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.today-summary {
  background: #f5f7fa;
  margin: 12rpx;
  border-radius: 10rpx;
  padding: 0rpx 10rpx 20rpx 10rpx;
}

.today-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  margin-top: 24rpx;
}

.today-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.today-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  letter-spacing: 2rpx;
}

.summary-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.summary-item {
  width: 49%;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 28rpx 28rpx 10rpx 28rpx;
  margin-bottom: 28rpx;
  box-sizing: border-box;
  border-radius: 6px;
  background: #fff;

}

.summary-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
  color: rgba(42, 130, 228, 1);
}

.summary-label {
  font-size: 30rpx;
  color: rgba(128, 128, 128, 1);
  text-align: left;
  vertical-align: top;
}

.summary-label-left {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.summary-arrow {
  width: 24rpx;
  height: 24rpx;
}

.summary-value {
  font-size: 36rpx;
}

.summary-value-blue {
  color: #1B98F5;
}

.summary-value-red {
  color: #E74C3C;
}

.summary-value-orange {
  color: #F39C12;
}
</style>
